import React, { lazy } from 'react'
// import Home from '@/views/Home'
// import About from '@/views/About'

// 懒加载
// 下方还需要在外面套一层Loading 的提示加载组件 <React.Suspense fallback={<div>Loading...</div>}> <Home /></React.Suspense>
// 简写
const About = lazy(() => import('@/views/About'))
const Home = lazy(() => import('@/views/Home'))
const Page1 = lazy(() => import('@/views/Page1'))
const Page2 = lazy(() => import('@/views/Page2'))


const awaitLoadingCompent = (comp: JSX.Element) => (
  <React.Suspense fallback={<div>Loading....</div>} >
    {comp}
  </React.Suspense>
)

// 重定向组件Navigate
import { Navigate } from 'react-router-dom'
const router = [
  {
    path: '/',
    element: <Navigate to="/page1" />
  },
  {
    path: '/',
    element: <Home />,
    children: [
      {
        path: '/page1',
        element: awaitLoadingCompent(<Page1 />)
      },
      {
        path: '/page2',
        element: awaitLoadingCompent(<Page2 />)
      }
    ]
  }
  // {
  //   path: '/home',
  //   element: awaitLoadingCompent(<Home />)
  // },
  // {
  //   // 懒加载方法
  //   path: '/about',
  //   element:awaitLoadingCompent(<About />)
  // },
  // {
  //   // 懒加载方法
  //   path: '/page1',   
  //   element:awaitLoadingCompent(<Page1 />)
  // },
  // {
  //   // 懒加载方法
  //   path: '/page2',   
  //   element:awaitLoadingCompent(<Page2 />)
  // },
]
export default router